<template>
    <div class="self-do">
        <div class="breadcrumb">
            首页 / 个人中心<span v-if="currentBreadcrumb"> / </span><strong>{{ currentBreadcrumb }}</strong>
        </div>

        <div class="content-wrapper">
            <aside class="sidebar">
                <ul>
                    <li>
                        <router-link to="/selfdo/company-info" active-class="active-link">
                            <img src="@/images/企业信息/u721.png" alt="企业信息图标" class="icon">
                            企业信息
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/selfdo/participate-bids" active-class="active-link">
                            <img src="@/images/参与投标/u935.png" alt="参与投标图标" class="icon">
                            参与投标
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/selfdo/my-bids" active-class="active-link">
                            <img src="@/images/我的标的/u1162.png" alt="我的投标图标" class="icon">
                            我的投标
                        </router-link>
                    </li>
                </ul>
            </aside>

            <main class="content">
                <!-- 显示默认用户信息 -->
                <div v-if="!$route.meta.showRouterView">
                    <div class="user-info">
                        <p>用户名称: <span style="color: gray;">admin</span></p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;ip属地: <span style="color: gray;">辽宁省大连市</span></p>
                        <p>所属机构: <span style="color: gray;">企业机构</span> </p>
                        <p>手机号码: <span style="color: gray;">15610565780</span></p>
                        <p>当前密码: <span style="color: gray;">eeeee</span></p>
                    </div>
                </div>
                <!-- 显示路由对应的内容 -->
                <router-view v-else></router-view>
            </main>
        </div>
    </div>
</template>

<script>
export default {
    computed: {
        currentBreadcrumb() {
            const route = this.$route;
            if (route.meta && route.meta.breadcrumb) {
                return route.meta.breadcrumb;
            }
            return '';
        }
    }
};
</script>

<style scoped>
.self-do {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
}

.breadcrumb {
    margin-bottom: 10px;
    font-size: 14px;
    margin-left: -1150px;
}

.content-wrapper {
    display: flex;
}

.sidebar {
    width: 200px;
    border-right: 1px solid #ddd;
    padding-right: 10px;
    background-color: #17C2AA;
    margin-left: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    flex-grow: 0;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin-bottom: 10px;
    font-size: 16px;
}

.sidebar a {
    text-decoration: none;
    color: white;
    display: block;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.active-link {
    background-color: white !important;
    color: #17C2AA !important;
}

.content {
    padding-left: 10px;
    flex-grow: 1;
}

.user-info {
    margin-top: 20px;
    font-size: 16px;
}

.icon {
    width: 15px;
    height: 15px;
    margin-right: 8px; 
}

.user-info{
    text-align:left;
    margin-left: 20px;
    width: 1100px;
    height:600px;
    border-right: 1px solid #ddd;
    padding-left: 50px;
    box-shadow: 0 4px 8px rgba(174, 171, 171, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
}

</style>